<script setup lang="ts">
import {useRouter} from 'vue-router'
const $router=useRouter()
interface Props{
  address:Address
}
interface Address{
  isDefault:boolean,
  name:string,
  mobile:string,
  city:string,
  detail:string,
  id:string
}
const props = withDefaults(defineProps<Props>(),{
  address: () =>{
    return {
      id:'',
      isDefault:true,
      name:'zcx',
      mobile:'17777777777',
      city:'四川省成都市武侯区',
      detail:'详细地址'
    }
  }
})
function editAddress() {
  $router.push({
    path:'/settings/addressedit',
    query:{
      id:props.address.id
    }
  })
}
</script>

<template>
  <div
    w:w="full"
    w:p="4"
  >
    <div
      w:flex="~ nowrap"
      w:text="xl gray-400"
      w:align="items-center"
    >
      <div v-if="props.address.isDefault"
        w:bg="red-600"
        w:text="xs white"
        w:p="2"
        w:m="r-4"
      >默认</div>
      <div>{{props.address.city}}</div>
    </div>
    <div
      w:flex="~ nowrap"
      w:justify="between"
      w:align="items-center"
      w:font="bold"
      w:text="3xl"
      w:m="y-4"
    >
      <div>{{props.address.detail}}</div>
      <div class="iconfont icon-edit" @click="editAddress"></div>
    </div>
    <div
      w:flex="~ nowrap"
      w:align="items-center"
      w:text="xl gray-400"
    >
      <div
        w:m="r-12"
      >{{props.address.name}}</div>
      <div>{{props.address.mobile}}</div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>